<%--
  Created by IntelliJ IDEA.
  User: Shinelon
  Date: 2020/11/23
  Time: 14:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>

    <title>员工管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/jquery-2.1.0.js"></script>
    <style type="text/css">
        .layui-form-selectup dl {
            bottom: auto;
        }
    </style>
    <script>
        var table = "";
        var cond = [];
        $(function () {
            layui.use(['table', 'form', 'layer', 'jquery'], function () {
                table = layui.table;
                var form = layui.form;
                var layer = layui.layer;
                var $ = layui.jquery;
                //表格渲染
                table.render({
                    elem: '#test' //id为test的table
                    , url: '${pageContext.request.contextPath}/selectStaff'   //url 查询数据   所有的客户的数据
                    , title: '员工表'
                    // ,data:[{ id:12,name:123}]
                    , cols: [[
                        {field: 'id', title: 'ID', fixed: 'left', sort: true, align: 'center'}
                        , {field: 'nstaff', title: '员工姓名', fixed: 'left', sort: true, align: 'center'}
                        , {
                            field: 'rzdate', title: '入职日期', align: 'center', templet: function (res) {
                                return layui.util.toDateString(res.rzdate, 'yyyy-MM-dd')
                            }
                        }
                        , {field: 'lzdate', title: '离职日期', align: 'center'}
                        , {field: 'ndept', title: '部门', align: 'center'}
                        , {field: 'nrole', title: '职位', align: 'center'}
                        , {field: 'address', title: '家庭住址', align: 'center'}
                        , {
                            field: 'status', title: '状态', align: 'center', sort: false, templet: function (res) {
                                //res  这一行的内容
                                var f = res.status;//状态值
                                if (f == 0) {
                                    //正常
                                    return "在职";
                                } else {
                                    return "离职";
                                }
                            }
                        }
                        , {fixed: 'right', title: '操作', width: 200, toolbar: '#barDemo'}
                    ]]
                    , page: {
                        curr: 1
                        , limit: 5
                        , limits: [5, 10, 15, 20]
                        , groups: 100
                        , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                    }, done: function (res, curr, count) {
                        var that = this.elem.next();
                        res.data.forEach(function (item, index) {
                            if (item.status === 1) {
                                var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                                tr.css("background-color", "gray");//目标单元格颜色
                                tr.css("color", "white");//被选中的单元格字体颜色 ：后勤部
                            }
                        });
                    }, parseData: function (res) {
                        if (res.code == -1) {
                            layuiHelp.AlertMsg(res.msg, res.icon);
                        }
                    }
                });
                //监听行工具事件  test  表格的id
                table.on('tool(test)', function (obj) {
                    //obj 代表 一行的内容
                    var data = obj.data; //一行的数据
                    console.log(data);
                    if (obj.event === 'del') {
                        layer.confirm('该员工确定离职吗', function (index) {
                            layui.use('layer', function () {
                                var layer = layui.layer;
                                layer.closeAll();
                                layer.open({
                                    title: '离职操作'
                                    , type: 1
                                    , content: $('#del')
                                    , offset: '0px'
                                    , moveOut: true
                                    , area: ['500px', '450px']
                                });
                                form.val('del', {
                                    "id": data.id // "name": "value"
                                });
                            })
                        });
                    } else if (obj.event === 'edit') {
                       $('#addform')[0].reset();
                       $("#alldept").empty();
                       //$("#allrole").empty();
                        display();
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                title: '修改'
                                , type: 1
                                , content: $('#add')
                                , offset: '0px'
                                , moveOut: true
                                , resize: false
                                , area: ['450px', '450px']
                            });
                            form.val('add', {
                                "id": data.id // "name": "value"
                                , "nstaff": data.nstaff
                                , "address": data.address
                                , "rzdate": data.rzdate
                                , "deptid": data.deptid
                                , "roleid": data.roleid
                            });
                        })
                    }
                });
                //2.点击事件修改和添加
                form.on('submit(add)', function (data) {
                    $.ajax({
                        url: "/Hotel/addStaff",
                        data: data.field,
                        success: function () {
                            layer.closeAll();
                            layui.use('layer',function () {
                                var layer = layui.layer;
                                layer.open({
                                    type:0,
                                    offset:'100px',
                                    content:"操作成功！"
                                })

                            })
                            table.reload("test");
                           $('#addform')[0].reset();
                            form.render();
                        },
                        error: function () {
                            layer.closeAll();
                            alert("操作失败");
                        }
                    });
                    return false;
                });
                //点击确认离职
                form.on('submit(del)', function (data) {
                    $.ajax({
                        url: "/Hotel/liZhi",
                        data: data.field,
                        success: function () {
                            layer.closeAll();
                            table.reload("test");
                            $('#delform')[0].reset();
                            form.render();
                        },
                        error: function () {
                            layer.closeAll();
                            alert("操作失败");
                        }
                    });
                    return false;
                })

                //填充下拉框
                function display() {
                    $.ajax({
                        url: '${pageContext.request.contextPath}/selectDept',
                        data: {},
                        type: 'post',
                        async: 'false',
                        dataType: 'JSON',
                        success: function (result) {
                            var res= result;
                            var option = "";
                            for (var i = 0; i < res.length; i++) {
                                option += '<option value="' + res[i]['id'] + '">' + res[i]['name'] + '</option>'
                            }
                            $("#alldept").append(option);
                           // alert(option);
                            form.render('select');
                        }
                    })
                    form.on('select(alldept)', function (data) {
                        if (data.value === "" || data.value === null) {
                            $("#allrole option").remove() // 清空上次的option残留
                            $("#allrole").append("<option value=''>请选择部门</option>") // 重新赋值初始选项
                            form.render()
                        } else {
                            // 根据选中的value获得 值（text） 赋值到隐藏的input中
                            var tname = data.elem[data.elem.selectedIndex].text;
                            $("#tname").val(tname)
                            $.ajax({
                                url: '${pageContext.request.contextPath}/selectRole',
                                type: 'post',
                                async: false,
                                data: {id: data.value},
                                dataType: 'json',
                                success: function (result) {
                                    $("#allrole option").remove() // 清空上次的option残留
                                    $("#allrole").append("<option value=''>请选择职位</option>") // 重新赋值初始选项
                                    var ss = result;
                                    var option = "";
                                    if (ss != null) {
                                        for (var i = 0; i < ss.length; i++) {
                                            option += "<option value='" + ss[i]['id'] + "'>" + ss[i]['name'] + "</option>";
                                        }
                                        $("#allrole").append(option);
                                    }
                                    form.render('select');
                                }
                            })
                        }
                    })

                }



                //点击添加显示文本框
                $("#addbtn").click(function () {
                    $('#addform')[0].reset();
                    //$("#alldept").empty();
                    //$("#allrole").empty();
                    display();
                    layui.use(['layer', 'form', 'table'], function () {
                        var layer = layui.layer;
                        var form = layui.form;
                        var table = layui.table;
                        layer.open({
                            title: '添加'
                            , type: 1
                            , content: $("#add")
                            , offset: '0px'
                            , moveOut: true
                            , resize: false
                            , area: ['450px', '450px']
                        });
                        // form.render('select');
                    })
                });

                $("#re").click(function () {
                    location = location;
                })
                //搜索点击事件
                $("#search").click(function () {
                    var snstaff = $("#nstaff").val();
                    var sndept = $("#ndept").val();
                    table.reload('test', {
                        method: 'post'
                        , where: {
                            snstaff: snstaff,
                            sndept: sndept
                        }
                        , page: {
                            curr: 1
                        }
                    })
                })


            });
        })
    </script>
</head>
<body>
<div class="layui-form-item">
    <%--增加按钮--%>
    <button type="button" class="layui-btn" id="addbtn">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>

    <div class="layui-inline">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" id="nstaff" name="nstaff" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">部门</label>
        <div class="layui-input-inline">
            <input type="text" id="ndept" name="ndept" autocomplete="off" class="layui-input">
        </div>
    </div>
    <%--检索按钮--%>
    <button type="button" class="layui-btn layui-btn-warm" id="search">搜索</button>
    <button type="reset" class="layui-btn layui-btn-normal" id="re">重置</button>
</div>
<%--表格--%>
<table class="layui-hide" id="test" lay-filter="test">
</table>
<%--行工具--%>
<script type="text/html" id="barDemo">
    {{#  if(d.status == 0){ }}
    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    <button id="delbtn" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled" lay-event="del">离职操作</button>
    {{#  } }}
    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.status == 1){ }}
    <%--        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">--%>
    <%--            <i class="layui-icon layui-icon-edit"></i>--%>
    <%--        </button>--%>
    {{#  } }}
</script>
<%--增加和修改公用了一个表单--%>
<div class="layui-row" id="add" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" style="margin-top:20px" lay-filter="add" id="addform">
            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label">id</label>
                <div class="layui-input-block">
                    <input type="text" name="id" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="nstaff" required lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">家庭住址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" required lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">入职日期</label>
                <div class="layui-input-block">
                    <input type="date" name="rzdate" required lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>

            </div>
            <input type="text" name="tname" style="display: none" id="tname">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <select name="deptid" id="alldept" lay-verify="required" lay-filter="alldept">
                    <option value="">请选择部门</option>
                </select>
            </div>

            <input type="text" name="sname" style="display: none" id="sname">
            <label class="layui-form-label">职位</label>
            <div class="layui-input-inline">
                <select name="roleid" id="allrole" lay-verify="required" lay-filter="allrole">
                    <option value="">请选择职位</option>
                </select>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add">确认</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!--离职表单-->
<div class="layui-row" id="del" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" style="margin-top:20px" lay-filter="del" id="delform">
            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label">id</label>
                <div class="layui-input-block">
                    <input type="text" name="id" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">离职日期</label>
                <div class="layui-input-block">
                    <input type="date" name="lzdate" required lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="del">确认</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>
